<style type="text/css">
	div.time-switch{
		margin:30px auto 10px;
	}
	ul.set-con-switch span.switch-short{
		margin-right:46px;
	}
	#TimePara{
		visibility:hidden;
	}
	#TimePara li.text-con{
		border: 0;
		text-align:left;
	}
	#TimePara label.desc-lbl{
		border-right:0;
		text-align:left;
	}
	#TimePara span.select{
		width: 37px;
	}
	#TimePara span.sel-value{
		width: 42px;
	}
	span.time-set{
		border: 1px solid #DDD;
		border-radius: 4px;
	}
	#sel-opts-ulRebootHour{
		right: 136px;
		width: 66px;
		max-height: 150px;
		margin-top: 1px;
	}
	#sel-opts-ulRebootMin{
		right: 46px;
		width: 65px;
		max-height: 150px;
		margin-top: 1px;
	}
	span.time-to{
		display: inline-block;
		vertical-align: middle;
		line-height: 28px;
		font-size: 14px;
		color: #4F5356;
		padding-left: 5px;
		padding-right: 5px;
	}
	div.time-btn{
		margin:45px auto 10px;
	}
	div.time-reboot{
		width:354px;
		height:310px;
		overflow:hidden;
		border-radius:5px;
		background-color:#FFF;
		margin:210px auto;
		position:relative;
	}
	div.time-err{
		position:absolute;
		margin:0px 50px;
	}
	i.close-btn{
		top:7px;
		right:10px;
	}
	input.btn-width{
		width: 254px;
	}
	/*1080p*/
	@media screen and (min-device-width:1920px){
		div.time-reboot{
			width:454px;
			height:360px;
			margin:320px auto;
		}
		i.close-btn{
			top:2px;
		}
		input.btn-width{
			width: 354px;
		}
	}
</style>
<script type="text/javascript">
(function(){
	<%
		local para = {
			time_reboot = {config = {}}
		}
		local result = tpl_get_data(para, true)
	-%>
	var timeInfo = <%=result%>;

	init(timeInfo);

	function init(result){
		var errNo = result[ERR_CODE];
		var ret;
		if (E_NONE == errNo){
			ret = result[K_MODULE];
		}else{
			console.log(result);
			return;
		}

		var info = ret.time_reboot.config;

		var rebootSwitch = info.enable;

		initSwitch("RebootSwitch", rebootSwitch, function(state){
			if (1 == state){
				$("#TimePara").css('visibility','visible');
			}else{
				$("#TimePara").css('visibility','hidden');
				$(".err-note").hide();
			}
		});

		var curHour = parseInt(info.reboot_hour, 10);
		var curMin = parseInt(info.reboot_minute, 10);
		var hourList = [];
		var hour;
		for (var i = 0; i < 24; i++){
			if (i.toString().length == 1){
				hour = "0" + i;
			}else{
				hour = i;
			}
			hourList.push({name : hour, value : i});
		}

		var minList = [];
		var min, val;
		for (var i = 0; i < 12; i++){
			if (i < 2){
				min = "0" + i * 5;
			}else{
				min = i * 5;
			}
			val = i * 5;
			minList.push({name : min, value : val});
		}

		initSelect("RebootHour", hourList, curHour);
		initSelect("RebootMin", minList, curMin);
	}

	$("#SaveTime").click(function(){
		var data = {};
		var para = {};
		para.time_reboot = {};
		para.time_reboot.config = data;

		data.enable = $("#RebootSwitch").attr("data-value")
		data.reboot_hour = $("#RebootHour").attr("data-value");
		data.reboot_minute = $("#RebootMin").attr("data-value");

		apiSet(para, function(ret){
			var code = ret[ERR_CODE];
			if (E_NONE == code){
				$(".close-btn").click();
			}else{
				errHandle(code);
			}
		});
	});

	function showNote(noteStr){
		$("#TimeErr").show();
		$("#TimeTip").html(noteStr);
	}

	function errHandle(code){
		switch(code){
		case E_NONE:
			break;
		default:
			showNote(errStr.unknownErr + code);
			break;
		}
		return true;
	}
})();
</script>
<div class="time-reboot">
	<p class="alert-title">{%label.timeRebootRouter%}</p>
	<i class="tip icon_close color-red close-btn"></i>
	<div class="set-con">
		<div class="time-switch">
			<ul class="set-con set-con-switch">
				<p class="set-con-desc">
					<label class="tip-lbl">{%label.rebootSwitch%}</label>
					<span id="RebootSwitch" class="switch-short switch">
						<i class="switch-circle icon_select_off"></i>
					</span>
				</p>
			</ul>
		</div>
		<div id="TimePara">
			<ul class="set-con">
				<li class="text-con nowrap">
					<label class="desc-lbl">{%label.rebootTime%}</label>
					<span id="RebootHour" class="select time-set">
						<span class="value sel-value"></span>
						<i class="tip icon_list-expansion"></i>
					</span>
					<span class="time-to">{%label.colon%}</span>
					<span id="RebootMin" class="select time-set">
						<span class="value sel-value"></span>
						<i class="tip icon_list-expansion"></i>
					</span>
				</li>
			</ul>
		</div>
		<div class="err-note hidden time-err" id="TimeErr">
			<i class="err-icon icon_remind_line"></i>
			<p class="note-str" id="TimeTip"></p>
		</div>
		<div class="btn-con time-btn">
			<input id="SaveTime" class="btn btn-width" type="button" value="{%btn.save%}" />
		</div>
	</div>
</div>